<template>
  <el-dialog v-bind="$attrs" v-on="$listeners" @closed="handleClose">
    <div v-if="step === 1">
      <div class="text-center text-xl mb-14">
        <h2>{{ $t('modules.login.message.select_character_title') }}</h2>
      </div>
      <div class="text-center">
        <div
          class="inline-block text-center mr-24"
          role="button"
          @click="() => handleRoleClick('developer')"
        >
          <img src="@/assets/images/sign-in-up/developer.png" class="mb-5" />
          <h2 class="text-xl">{{ $t('modules.login.developer') }}</h2>
        </div>
        <div class="inline-block mb-6" role="button" @click="() => handleRoleClick('operator')">
          <img
            src="@/assets/images/sign-in-up/operator.png"
            class="mb-6"
            style="color: #b1c2d9"
          />
          <h2 class="text-xl">{{ $t('modules.login.operator') }}</h2>
        </div>
      </div>
    </div>
    <div v-if="step === 2">
      <div class="text-center mb-6">
        <div class="text-4xl mb-5">
          <h2>{{ $t('modules.login.welcome_title') }}{{role.toUpperCase()}}</h2>
        </div>
        <div class="text-secondary text-lg w-4/6 m-auto">
          <p style="word-break: break-all">{{ $t('modules.login.message.enter_email_tip') }}</p>
        </div>
      </div>
      <el-form
        @submit.prevent.native
        class="w-4/5 m-auto"
        :model="formData"
        :rules="rules"
        ref="form"
      >
        <el-form-item prop="email">
          <el-input
            class="email-collect-input"
            :placeholder="$t('modules.login.message.enter_email_placeholder')"
            style
            v-model="formData.email"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="w-full" @click="submit">{{ $t('common.confirm') }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    step: Number
  },
  data() {
    return {
      role: '',
      formData: {
        email: ''
      },
      rules: {
        email: [
          {
            required: true,
            message: this.$t('modules.login.message.email_required')
          },
          {
            type: 'email',
            message: this.$t('modules.login.message.invalid_email_format')
          }
        ]
      }
    }
  },
  methods: {
    handleRoleClick(role) {
      this.role = role
      this.step = 2
    },
    handleClose() {
      this.$refs.form.cleare
      this.$refs.form.resetFields()
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
        }
      })
    }
  }
}
</script>

<style lang="scss">
.email-collect-input {
  input {
    font-size: 2em;
    font-weight: bold;
    color: midnightblue;
    text-align: center;
    padding: 1.2em 0.2em;
  }
}
</style>
